<template>
  <div class="pieChart" :id="id"></div>
</template>

<script>
// 玫瑰图
import * as echarts from "echarts";
import { color } from "echarts/lib/export";
export default {
  props: ["id", "pie_data"],
  data() {
    return {
    };
  },
  methods: {
    draw_pie() {
      let charts = echarts.init(document.getElementById(this.id));
      let dataArr = [
        { value: this.pie_data.practice_rate.replace('%', ''), name: '练习型' },
        { value: this.pie_data.mix_rate.replace('%', ''), name: '混合型' },
        { value: this.pie_data.dialogue_rate.replace('%', ''), name: '对话型' },
        { value: this.pie_data.teach_rate.replace('%', ''), name: '讲授型' },]
      charts.setOption({
        color: ['#06BBF2', '#0C01BD', '#045ED7', '#33F1FE'],
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
        },
        series: [
          {
            name: '',
            type: 'pie',
            roseType: "radius",
            radius: '70%',
            center: ["50%", "48%"],
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 20,
              label: {
                color: '#fff'
              }
            },
            data: dataArr,
            label: {
              formatter: function(params) {
                return params.name + params.value + '%'; // 拼接显示数值和名称
              }
            },
            labelLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
            },

          }
        ]
      });
      window.addEventListener("resize", function() {
        charts.resize();
      });
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.draw_pie();
    });
  },
};
</script>

<style scoped>
.pieChart {
  height: 275px;
  /* width: 300px; */
}
</style>
